<template>
  <v-form ref="SearchComponent" v-model="valid" :lazy-validation="options.lazyValidation" :class="options.class">
    <v-row no-gutters>
      <template v-for="item in items">
        <v-col v-if="item.search" :key="item.id" cols="12" xs="12" sm="4" :md="item.searchSpan" lg="3" xl="2">
          <form-content
            v-model="searchForm[item.prop]"
            class="pa-1"
            :class="options.formLayout === 'l&r' ? 'UnshowDefaultLabel' : 'insideFormItemStyle'"
            :config-item="item"
            @input="$emit('input', searchForm[item.prop])"
          >
          </form-content>
        </v-col>
      </template>
    </v-row>
  </v-form>
</template>

<script>
import FormContent from '../FormCompoent/FormContent.vue'

import { setItemShow } from '@/utils/formCommonUtils'

export default {
  // 表单主要组件
  name: 'SearchComponent',

  // 引用组件
  components: {
    FormContent
  },

  // 父组件传递的props
  props: {
    // 显示表单
    searchShow: { type: Boolean, default: null },
    // 表单数据
    searchData: { type: Object, default: () => ({}) },
    // 表单配置
    searchOptions: { type: Object, default: () => ({}) },
    // 搜索项配置
    searchItem: { type: Array, default: () => [] }
  },

  data() {
    return {
      // 显示重定向
      show: this.searchShow,
      // 表格有效值
      valid: true,
      // 表单配置重定向
      options: this.searchOptions,
      // 搜索项重定位
      items: this.searchItem,
      // 表单
      searchForm: this.searchData
    }
  },

  computed: {},

  created() {
    setItemShow(this.show, this.items, 'search', false)
    this.reFreshView()
  },

  mounted() {
    this.reFreshView()
  },

  methods: {
    reFreshView() {
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    }
  }
}
</script>
